<template>
  <div class="newpro-body">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar
        title="新品"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right>
          <van-icon :badge="cartCount" name="cart" size="20" />
        </template>
      </van-nav-bar>
    </van-sticky>

    <!-- 内容中心 -->
    <div class="newpro-contanier">
      <!-- 1.顶部提示 -->
      <van-notice-bar
        left-icon="volume-o"
        text="新品移动端开发中,欢迎商家入驻.如有发现有什么问题,欢迎致电028--888888"
      />
      <!-- 2.轮播 -->
      <Newprobanner></Newprobanner>

      <!-- 3.table滑动列表 -->
      <Newprotable></Newprotable>

    </div>
    <van-cell title=""></van-cell>
    <van-cell title=""></van-cell>
    <van-cell title=""></van-cell>
    <!-- 5.底部导航栏 -->
    <Buttom-Tabbar></Buttom-Tabbar>
    <router-view />
  </div>
</template>

<script>
import Newprobanner from "./Newprobanner";
import Newprotable from "./Newprotable";
export default {
  data() {
    return {};
  },
  components: {
    Newprobanner,
    Newprotable,
  },

  computed: {
    cartCount() {
      let cartList = this.$store.getters.cartList;
      let count = cartList.length;
      return count;
    },
  },
  methods: {
    onClickLeft() {
      this.$toast("返回首页");
      // this.$router.go(-1);
      this.$router.push({ path: "/home" });
    },
    onClickRight() {
      this.$toast("跳转到购物车");
      this.$router.push({ path: "/cart" });
    },
  },
};
</script>

<style lang="scss" scoped>
.newpro-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .newpro-contanier {
    flex-grow: 1;
    overflow: auto;
    .contanier-box {
      width: 42px;
      height: 42px;
      border: 1px solid #fff;
      border-radius: 10%;
      font-size: 18px;
      position: fixed;
      right: 19px;
      bottom: 60px;
      z-index: 1001;
      background-color: #f4f4fe;
    }
  }
}
</style>
